<template>
  <PageWrapper contentClass="flex" contentFullHeight dense fixedHeight>
    <a-card>
      <div style="margin-bottom: 20px">
        <a-form :model="formState">
          <a-row :gutter="[20, 20]">
            <!-- <a-col :xs="24" :sm="6">
              <a-form-item :label="'账户名'">
                <a-input allowClear :placeholder="'账户名'" v-model:value="formState.superTaskId" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-form-item label="状态">
                <a-select v-model:value="formState.status">
                  <a-select-option :value="1">停用</a-select-option>
                  <a-select-option :value="2">启用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :xs="24" :sm="6">
              <a-space>
                <!-- <a-button @click="Reactinquire" :icon="h(SearchOutlined)" type="primary">
                  {{ t('sys.form.placeholder.inquire') }}
                </a-button> -->
                <a-button @click="Addinquire" :icon="h(PlusOutlined)" type="primary">
                  {{ t('sys.configuration.add') }}
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        @change="handleTableChange"
        :pagination="pagination"
        :loading="loading"
        bordered
        :scroll="{ x: 820 }"
        rowKey="id"
        :columns="columns"
        :showExpandColumn="false"
        :dataSource="dataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'cmdType'">
            <a-tag v-if="record.cmdType" color="blue">
              {{ record.cmdType == 1 ? t('sys.commandSet.type1') : t('sys.commandSet.type2') }}
            </a-tag>
            <span v-else></span>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <a-space>
              <a-button @click="drawerEditBoxClick(record)" type="link">
                {{ t('sys.configuration.edit') }}
              </a-button>
              <a-popconfirm
                @confirm="deleteCmdClick(record.id)"
                :title="t('sys.configuration.IsDelete')"
                :ok-text="t('sys.configuration.comfig')"
                :cancel-text="t('sys.configuration.cancel')"
              >
                <a-button danger type="link"> {{ t('sys.configuration.delete') }}</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-drawer
      v-model:open="DrawerDetalsShow"
      class="custom-class"
      root-class-name="root-class-name"
      :title="
        addformState.id == null
          ? t('sys.configuration.add') + t('sys.commandSet.title')
          : t('sys.configuration.edit') + t('sys.commandSet.title')
      "
      placement="right"
    >
      <a-form :label-col="{ span: 6 }" :model="addformState">
        <a-form-item :label="t('sys.script.columns.name')">
          <a-input
            allowClear
            :placeholder="t('sys.configuration.pleaseenter') + t('sys.script.columns.name')"
            v-model:value="addformState.cmdName"
          />
        </a-form-item>
        <a-form-item :label="t('sys.script.columns.structuralBody')">
          <a-textarea
            allowClear
            :autoSize="{ minRows: 5, maxRows: 10 }"
            :placeholder="
              t('sys.configuration.pleaseenter') + t('sys.script.columns.structuralBody')
            "
            v-model:value="addformState.cmdContent"
          />
        </a-form-item>
        <a-form-item :label="t('sys.menu.columns.type')">
          <a-select
            :placeholder="t('sys.configuration.pleasechoose') + t('sys.menu.columns.type')"
            v-model:value="addformState.cmdType"
          >
            <a-select-option :value="1">{{ t('sys.commandSet.type1') }}</a-select-option>
            <a-select-option :value="2">{{ t('sys.commandSet.type2') }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <a-divider />
      <div style="display: flex; justify-content: flex-end">
        <a-button @click="ADDcomfig" type="primary" size="small"> 确定 </a-button>
      </div>
    </a-drawer>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { onMounted, ref, h } from 'vue';
  import { postCmdSave, deleteCmd, postCmdUpdate, postCmdPage } from '@/api/demo/device';
  import { message } from 'ant-design-vue';
  import { useRoute } from 'vue-router';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  const ADDcomfig = () => {
    if (addformState.value.id == null) {
      postCmdSave(addformState.value).then((res) => {
        if (res.code == 200) {
          message.success(t('sys.api.operationSuccess'));
          init();
          DrawerDetalsShow.value = false;
        }
      });
    } else {
      postCmdUpdate(addformState.value).then((res) => {
        if (res.code == 200) {
          message.success(t('sys.userlist.columns.modifySuccessfully'));
          init();
          DrawerDetalsShow.value = false;
        }
      });
    }

    DrawerDetalsShow.value = false;
  };
  const dataSource = ref([
    {
      id: 1,
      name: 'test123',
      password: 'test123',
      cookies: 'edjhakfhsak.sddfhjahkjshsakdjskjfdsafjkhsakjfhskdshhs',
      status: 1,
      type: 1,
      time: '2025-12-4',
    },
  ]);
  const formState = ref({});
  const addformState = ref({});
  const Reactinquire = () => {
    init();
  };
  const columns = ref([
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: t('sys.script.columns.name'),
      dataIndex: 'cmdName',
    },
    {
      title: t('sys.script.columns.structuralBody'),
      dataIndex: 'cmdContent',
    },
    {
      title: t('sys.menu.columns.type'),
      dataIndex: 'cmdType',
      width: 120,
    },
    {
      title: t('sys.configuration.action'),
      dataIndex: 'operation',
      key: 'operation',
      width: 80,
    },
  ]);
  const loading = ref(false);
  const DrawerDetalsShow = ref(false);
  const Addinquire = () => {
    DrawerDetalsShow.value = true;
  };
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });

  const drawerEditBoxClick = (record) => {
    DrawerDetalsShow.value = true;
    addformState.value = record;
  };
  const handleTableChange = (e) => {
    pagination.value = e;
    init();
  };
  const init = () => {
    loading.value = true;
    postCmdPage({
      size: pagination.value.pageSize,
      current: pagination.value.current,
    }).then((res) => {
      if (res.code == 200) {
        dataSource.value = res.data.records;
        pagination.value.total = res.data.total;
        loading.value = false;
      }
    });
  };
  const deleteCmdClick = (id) => {
    deleteCmd(id).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.configuration.deleteSucces'));
        init();
      }
    });
  };
  onMounted(() => {
    init();
  });
</script>
<style scoped lang="less"></style>
